<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name='format-detection' content='telephone=no' />
<title>人车人</title>
<link rel="icon" href="/assets/img/titleico.ico" type="image/x-icon">
<link rel="stylesheet" href="/assets/css/common.css" />
<link rel="stylesheet" href="/assets/css/swiper-3.4.2.min.css" />
<style>
	body {
		background-color: #f2f2f2;
	}
	
	header {
		height: 40px;
		background-color: #fff;
		overflow: hidden;
		position: relative;
	}
	
	header h2 {
		text-align: center;
		color: #4d4d4d;
		line-height: 40px;
		font-weight: normal;
		font-size: 18px;
	}
	
	header .icon {
		width: 24px;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		-webkit-align-items: center;
		align-items: center;
    	-webkit-justify-content: flex-end;
    	justify-content: flex-end;
    	padding-right: 14px;
	}
	
	header .icon img {
		width: 10px;
	}
	
	.swiper-pagination-bullet-active {
		background-color: #f5a32d;
	}
	
	.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
		bottom: 0;
	}
	
	.app {
		margin-top: 10px;
		margin-bottom: 20px;
	}
	
	.app .main {
		position: relative;
		margin: 0 14px;
	}
	
	.app .main .bg {
		width: 100%
	}
	
	.app .main .nav	{
		position: absolute;
	    left: 0;
	    top: 2rem;
	    padding: 0 6%;
	    width: 88%;
	    -webkit-justify-content: center;
	    justify-content: center;
	}
	
	.app .main .nav a {
		font-size: 1.6rem;
		color: #666;
	}
	
	.app .main .nav a.active {
		color: #f5a32d;
	}
	
	.app .main .nav a:first-child {
		margin-right: 1.4rem;
	}
	
	.app .main .content {
		position: absolute;
		width: 88%;
		top: 6rem;
		left: 0;
		padding: 0 6%;
	}
	
	.app .main .content li {
		height: 4.4rem;
		-webkit-align-items: center;
		align-items: center;
	}
	
	.app .main .content li span {
		color: #666;
	}
	
	.app .main .content li .databox {
		padding: 0 1.2rem;
	    overflow: hidden;
	    text-overflow: ellipsis;
	    white-space: nowrap;
	    flex: 1;
	    text-align: right;
	    color: #808080;
	}
	
	.app .main .content li .input {
		height: 100%;
	}
	
	.app .main .content li .icon {
		width: 0.8rem;
	}
	
	.app .main .content li .mile {
		font-size: 1.2rem;
		color: #f7b557;
	}
	
	.app .main a.submit {
		display: block;
		position: absolute;
		width: 80%;
		height: 40px;
		line-height: 40px;
		text-align: center;
		bottom: 2.6rem;
		left: 50%;
		margin-left: -40%;
		border-radius: 0.6rem;
		color: #fff;
		background-color: #ccc;
	}
	
	.app .main a.ok {
		background-color: #f5a32d;
	}
	
	.panel-initial {
		display: none;
		position: absolute;
		top: 0;
		z-index: 9;
	    background-color: #fff;
	    width: 100%;
	}
	
	.panel-initial .header {
		padding: 10px 12px;
	    font-size: 16px;
	    position: fixed;
	    text-align: center;
	    top: 0;
	    left: 0;
	    width: 100%;
	    -webkit-box-sizing: border-box;
	    box-sizing: border-box;
	    background-color: #fff;
	    z-index: 10;
	    overflow: hidden;
	}
	
	.panel-initial .header a {
		color: #f60;
	    position: absolute;
	    left: 0;
	    top: 0;
	    height: 44px;
	    line-height: 44px;
	    width: 56px;
	}
	
	.panel-initial .header p {
		text-align: center;
	}
	
	.panel-initial .content {
		padding-top: 40px;
		min-height: 94vh;
	}
	
	.panel-initial .content .loading {
		margin-top: 35%;
		text-align: center;
	}
	
	.panel-initial .content .loading img {
		width: 30px;
	}
	
	.panel-initial .content .wrapper .cls p.title {
		padding: 5px 12px;
    	background-color: #f5f5f5;
	}
	
	.panel-initial .content .wrapper .cls li {
		padding: 10px 12px;
	}
	
	.panel-initial .content .wrapper .cls li p.price {
		color: #f60;
		margin-top: 4px;
	}
	
	.panel-initial .content .listwrapper li p.tit {
		padding: 10px 12px;
	}
	
	.panel-initial .content .listwrapper li .citysbox {
		padding: 5px 0;
    	background-color: #ddd;
    	overflow: hidden;
    	display: none;
	}
	
	.panel-initial .content .listwrapper li .citysbox a {
		float: left;
	    background-color: #fff;
	    width: 20%;
	    text-align: center;
	    padding: 5px 0;
	    margin: 5px 2.5%;
	    border-radius: 3px;
	    overflow: hidden;
	    text-overflow: ellipsis;
	    white-space: nowrap;
	}
	
	.panel-initial .initial-list {
		position: fixed;
	    right: 0;
	    top: 40px;
	    z-index: 10;
	}
	
	.panel-initial .initial-list li {
		padding: 2px 15px;
    	font-size: 14px;
    	text-align: center;
	}
	
	
</style>
</head>
<body>
	<header>
		<div class="icon flexbox" id="back"><img src="/assets/img/back2@2x.png" /></div>
		<h2>车辆评估</h2>
	</header>
	
	<!-- 轮播图 -->
	<div class="swiper-container">
		<div class="swiper-wrapper">
			<div class="swiper-slide">
				<img src="/assets/img/pingu_bn_1.jpg" width="100%" />
			</div>
			<div class="swiper-slide">
				<img src="/assets/img/pingu_bn_2.jpg" width="100%" />
			</div>
		</div>
		<div class="swiper-pagination"></div>
	</div>
	
	<section class="app" id="app">
		<div class="main">
			<img class="bg" src="/assets/img/pingu-bg@2x1.png" />
			<div class="nav flexbox">
				<a href="/pinggu/pinggu" class="active">普通评估</a>
				<a href="/pinggu/accurate">精确评估</a>
			</div>
			<ul class="content">
				<li class="flexbox b_bor" load="0" id="showBrand">
					<span>车辆型号</span>
					<p class="databox" title="_title"></p>
					<img class="icon" src="/assets/img/next.png" />
				</li>
				<li class="flexbox b_bor" load="0" id="showArea">
					<span>所在城市</span>
					<p class="databox" title="_city"></p>
					<img class="icon" src="/assets/img/next.png" />
				</li>
				<li class="flexbox b_bor" id="showRegdate">
					<span>首次上牌</span>
					<p class="databox" title="_regdate"></p>
					<img class="icon" src="/assets/img/next.png" />
				</li>
				<li class="flexbox b_bor">
					<span>行驶里程</span>
					<input class="databox input" id="mile" type="number" />
					<p class="mile">万公里</p>
				</li>
			</ul>
			<a href="javascript:;" class="submit" id="submit">马上估值</a>
		</div>
	</section>
	
	<!-- 选择车辆品牌 -->
	<section class="panel-initial" id="brand">
		<div class="header b_bor">
			<a id="close-brand">关闭</a>
			<p>选择车辆品牌</p>
		</div>
		<div class="content">
			<div class="loading">
				<img src="/assets/img/small-loading.svg" />
				<p>正在加载...</p>
			</div>
		</div>
		<div class="initial-list">
			<ul id="brandnav"></ul>
		</div>
	</section>
	
	<!-- 选择车系 -->
	<section class="panel-initial" id="series">
		<div class="header b_bor">
			<a id="show-brand">返回</a>
			<p>选择车系</p>
		</div>
		<div class="content">
			<div class="loading">
				<img src="/assets/img/small-loading.svg" />
				<p>正在加载...</p>
			</div>
		</div>
	</section>
	
	<!-- 选择车型 -->
	<section class="panel-initial" id="model">
		<div class="header b_bor">
			<a id="show-series">返回</a>
			<p>选择车型</p>
		</div>
		<div class="content">
			<div class="loading">
				<img src="/assets/img/small-loading.svg" />
				<p>正在加载...</p>
			</div>
		</div>
	</section>
	
	<!-- 选择地区 -->
	<section class="panel-initial" id="area">
		<div class="header b_bor">
			<a id="close-area">关闭</a>
			<p>选择地区</p>
		</div>
		<div class="content">
			<div class="loading">
				<img src="/assets/img/small-loading.svg" />
				<p>正在加载...</p>
			</div>
		</div>
	</section>
	
	<!-- 选择上牌时间 -->
	<section class="panel-initial" id="regdate">
		<div class="header b_bor">
			<a id="close-regdate">关闭</a>
			<p>选择上牌时间</p>
		</div>
		<div class="content">
			<div class="loading"></div>
		</div>
	</section>
	
	<script src="/assets/js/fastclick.min.js"></script>
	<script src="/assets/js/jquery-3.1.1.min.js"></script>
	<script src="/assets/js/swiper-3.4.2.jquery.min.js"></script>
	<script src="/assets/js/axios.min.js"></script>
	<script src="/assets/js/xxsg.js"></script>
	<script>
		$(function(){
			var mySwiper = new Swiper('.swiper-container', {
				pagination: '.swiper-pagination',
				loop: true,
				autoplay: 3000,
				autoplayDisableOnInteraction: false
			})
			
			
			var loadingHTML = "<div class='loading'>"+
							  "    <img src='/assets/img/small-loading.svg' />"+
							  "    <p>正在加载...</p>"+
						      "</div>",
				errorHTML = "<div class='loading'>查询失败，请稍后重试！</div>"
			$('#back').click(function(){
		    	window.history.go(-1);
		    });
			
			//上牌时间范围
			var min_reg_year = "",
				max_reg_year = ""
			
			//获取车辆品牌
			axios.get("/che300/getCarBrandList")
     		.then(function(res){
     			if (!_x.isEmpty(res.data.ret_code) && res.data.ret_code === "0") {
     				$("#brand .content").html(errorHTML)
     				return 
     			}
     			$("#showBrand").attr("load", 1)
     			renderBrand(res.data)
     		})
     		
     		//渲染品牌列表
     		function renderBrand (data) {
    			var	html = "<ul class='wrapper'>",
    				navHTML = ""
    			
    			for (var i = 0; i < data.length; i++) {
    				if (brandMap[data[i].initial]) {
    					brandMap[data[i].initial].push(data[i])
    				}
    			}
    			
    			for (var k in brandMap) {
    				if (brandMap[k].length > 0) {
    					html += "<li class='cls'><p class='title'>"+ k +"</p><ul>"
        				for (var i = 0; i < brandMap[k].length; i++) {
        					var bor = "b_bor"
        					if (i === brandMap[k].length - 1)bor = ""
        					html += "<li class='"+ bor +" sel-hook ac' data-brandid='"+ brandMap[k][i].brand_id +"'>"+ brandMap[k][i].brand_name +"</li>"
        				}
        				html += "</ul></li>"
        				
        				navHTML += "<li>"+ k +"</li>"
        				
    				}
    			}
    			
    			html += "</ul>"
    			
    			$("#brandnav").html(navHTML)
    			$("#brand .content").html(html)
    		}
			
			var brandMap = {
    			A: [],
    			B: [],
    			C: [],
    			D: [],
    			E: [],
    			F: [],
    			G: [],
    			H: [],
    			I: [],
    			J: [],
    			K: [],
    			L: [],
    			M: [],
    			N: [],
    			O: [],
    			P: [],
    			Q: [],
    			R: [],
    			S: [],
    			T: [],
    			U: [],
    			V: [],
    			W: [],
    			X: [],
    			Y: [],
    			Z: []
    		}
			
			$("#showBrand").click(function(){
				var that = $(this)
				if (that.attr("load") === "0") {
					$("#brand .content").html(loadingHTML)
					axios.get("/che300/getCarBrandList")
		     		.then(function(res){
		     			console.log(res.data)
		     			if (!_x.isEmpty(res.data.ret_code) && res.data.ret_code === "0") {
		     				$("#brand .content").html(errorHTML)
		     				return 
		     			}
		     			that.attr("load", 1)
		     			renderBrand(res.data)
		     		})
				}
				$("#brand").show()
			})
			
			$("#brand").on("click","li.sel-hook",function(){
				var brandId = $(this).data("brandid")
				$("#brand").hide()
				$("#series").show().children(".content").html(loadingHTML)
				axios.get("/che300/getCarSeriesList",{
    				params: {
    					brandId: brandId
    				}
    			})
    			.then(function(res){
    				var html = "<ul class='listwrapper'>"
    				for (var i = 0; i < res.data.length; i++) {
    					html += "<li class='b_bor sel-hook ac' data-seriesid='"+ res.data[i].series_id +"'><p class='tit'>"+ res.data[i].series_name +"</p></li>"
    				}
    				
    				html += "</ul>"
    				$("#series .content").html(html)
    			})
			})
			
			$("#series").on("click","li.sel-hook",function(){
				var seriesId = $(this).data("seriesid")
				$("#model").show().children(".content").html(loadingHTML)
				$("#series").hide()
				axios.get("/che300/getCarModelList",{
    				params: {
    					seriesId: seriesId
    				}
    			})
    			.then(function(res){
    				renderModelList(res.data)
    			})
			})
    		
			function renderModelList (data) {
				var	html = "<ul class='wrapper'>",
					yearArr = []
				for (var i = 0; i < data.length; i++) {
					if (yearArr.indexOf(data[i].model_year) === -1) {
						yearArr.push(data[i].model_year)
					}
				}
				yearArr.sort(function(a, b) {
					return a.model_year - b.model_year
				})

				for (var i = 0; i < yearArr.length; i++) {
					html += "<li class='cls'><p class='title'>"+ yearArr[i] +"</p><ul>"
					for (var j = 0; j < data.length;j++) {
						if (yearArr[i] === data[j].model_year) {
							html += "<li class='b_bor sel-hook ac' data-modelid='"+ data[j].model_id +"' data-minregyear='"+ data[j].min_reg_year +"' data-maxregyear='"+ data[j].max_reg_year +"' modelname='"+ data[j].model_name +"'>"+ data[j].model_name +"<p class='price'>"+ data[j].model_price +"万</p></li>"
						}
					}
					html += "</ul></li>"
				}
				
				html += "</ul>"
				
				$("#model .content").html(html)
			}
			
			$("#model").on("click","li.sel-hook",function(){
				var that = $(this),
					model_id = that.data("modelid"),
					model_name = that.attr("modelname"),
					minregyear = that.data("minregyear"),
					maxregyear = that.data("maxregyear")
				
				min_reg_year = minregyear
				max_reg_year = maxregyear
				$("#model").hide()
				$("#showBrand").data("modelid", model_id).children("p").html(model_name)
				validator(false)
			})
			
			//计算高度
			var listHeight = [0]
			function calcHeight (liDom) {
				var h = 0
				liDom.each(function(){
					h += $(this).outerHeight()
					listHeight.push(h)
				})
			}
			
			//车型页侧导航
			$("#brandnav").on("click","li",function(){
				if (listHeight.length === 1){
					calcHeight($("#brand .content li.cls"))
				}
				document.body.scrollTop = listHeight[$(this).index()]
			})
			
			//车型页面返回、关闭
			$("#close-brand").click(function(){
				$("#brand").hide()
			})
			$("#show-brand").click(function(){
				$("#series").hide()
				$("#brand").show()
			})
			$("#show-series").click(function(){
				$("#series").show()
				$("#model").hide()
			})
			
			//获取城市信息
			var provIds = []
    		var citys = []
    		axios.get("/che300/getAllCity")
    		.then(function(res){
    			if (!_x.isEmpty(res.data.ret_code) && res.data.ret_code === "0") {
     				$("#area .content").html(errorHTML)
     				return 
     			}
    			$("#showArea").attr("load", 1)
    			citys = res.data
    			for (var i = 0; i < res.data.length; i++) {
    				provIds.push(res.data[i].prov_id)
    			}
    			renderProv(provIds)
    		})
    		
    		function renderProv (provIds) {
    			//去重并且升序排序
    			var provIds = unshift(provIds).sort(function(a, b) {
    				return a - b
    			})
    			
    			var provHtml = "<ul class='listwrapper'>"
    			
    			//获取省份
    			for (var i = 0; i < provIds.length; i++) {
    				for (var j = 0; j < citys.length;j++) {
    					if (provIds[i] === citys[j].prov_id) {
    						provHtml += "<li class='b_bor sel-hook' data-provid='"+ citys[j].prov_id +"' show='0'><p class='tit'>"+ citys[j].prov_name +"</p><div class='citysbox'></div></li>"
    						break
    					}
    				}
    			}
    			provHtml += "</ul>"
    			
    			$("#area .content").html(provHtml)
    		}
			
			$("#showArea").click(function(){
				var that = $(this)
				if (that.attr("load") === "0") {
					$("#area .content").html(loadingHTML)
					axios.get("/che300/getAllCity")
		    		.then(function(res){
		    			if (!_x.isEmpty(res.data.ret_code) && res.data.ret_code === "0") {
		     				$("#area .content").html(errorHTML)
		     				return 
		     			}
		    			that.attr("load", 1)
		    			citys = res.data
		    			for (var i = 0; i < res.data.length; i++) {
		    				provIds.push(res.data[i].prov_id)
		    			}
		    			renderProv(provIds)
		    		})
				}
				$("#area").show()
			})
			
			//关闭
			$("#close-area").click(function(){
				$("#area").hide()
			})
			
			//选择省份展示城市
			$("#area").on("click","li.sel-hook",function(){
				var that = $(this),
					prov_id = that.data("provid"),
					citysBox = that.children(".citysbox")
				that.parent().find(".citysbox").hide()
				if (that.attr("show") === "0") {
					that.attr("show", "1")
					for (var i = 0; i < citys.length; i++) {
						if (citys[i].prov_id == prov_id) {
							citysBox.append("<a href='javascript:;' class='selcity-hook' provname='"+ citys[i].prov_name +"' cityname='"+ citys[i].city_name +"' data-cityid='"+ citys[i].city_id +"'>"+ citys[i].city_name +"</a>")
						}
					}
				}
				citysBox.show()
			})
			
			//选择城市
			$("#area").on("click","a.selcity-hook",function(){
				var that = $(this),
					city_id = that.data("cityid"),
					prov_name = that.attr("provname"),
					city_name = that.attr("cityname"),
					areaTxt = prov_name +"&nbsp;"+ city_name
				if (prov_name === city_name) {
					areaTxt = prov_name
				}
				$("#area").hide()
				$("#showArea").data("zone", city_id).children(".databox").html(areaTxt)
				validator(false)
			})
			
			//选择上牌时间
			$("#showRegdate").click(function(){
				if (_x.isEmpty(min_reg_year) || _x.isEmpty(max_reg_year)) {
					_x.showTip("请先选择车型")
					return
				}
				
				var html = "<ul class='listwrapper'>"
				
				for (var i = max_reg_year; i >= min_reg_year;i--) {
					html += "<li class='b_bor sel-hook' data-year='"+ i +"' show='0'><p class='tit'>"+ i +"年</p><div class='citysbox'></div></li>"
				}
				
				html += "</ul>"
				
				$("#regdate").show().children(".content").html(html)
			})
			
			$("#regdate").on("click","li.sel-hook",function(){
				var that = $(this),
					year = that.data("year"),
					citysBox = that.children(".citysbox")
				that.parent().find(".citysbox").hide()
				if (that.attr("show") === "0") {
					var nowDate = new Date(),
						nowYear = nowDate.getFullYear(),
						nowMonth = nowDate.getMonth() + 1,
						month = 12
					if (year == nowYear) {
						month = nowMonth
					}
					that.attr("show", "1")
					for (var i = 1; i <= month; i++) {
						var date = i
						if (i < 10) date = "0" + i
						citysBox.append("<a href='javascript:;' class='selcity-hook' data-date='"+ year +"-"+ date +"'>"+ i +"月</a>")
					}
				}
				citysBox.show()
			})
			
			$("#regdate").on("click","a.selcity-hook",function(){
				var date = $(this).data("date")
				$("#regdate").hide()
				$("#showRegdate").data("regdate", date).children(".databox").html(date)
				validator(false)
			})
			
			//关闭
			$("#close-regdate").click(function(){
				$("#regdate").hide()
			})
			
			//去重
    		function unshift (arr) {
    			var newArr = []
    			for (var i = 0; i < arr.length; i++) {
    				if (newArr.indexOf(arr[i]) === -1) {
    					newArr.push(arr[i])
    				}
    			}
    			return newArr
    		}
			
			$("#mile").blur(function(){
				validator(false)
			})
			
			$("#submit").click(function(){
				var that = $(this),
					mark = validator(true)
				if (mark) {
					var nowdata = {}
					$("#app .main ul.content li").each(function(){
						var pDom = $(this).children("p.databox"),
							key = pDom.attr("title"),
							val = pDom.html()
						nowdata[key] = val
					})
					
					that.html("<div class='textloading'></div>")
					axios.get("/che300/estimatedValue",{
    					params: mark
    				})
    				.then(function(res){
    					console.log(res.data)
    					if (!_x.isEmpty(res.data.ret_code) && res.data.ret_code == "0") {
    						_x.showTip(res.data.ret_msg)
    						that.html("马上估值")
    					} else {
    						//c_o_result--》车300普通评估结果
    						_x.setSessionStorage("c_o_result", jQuery.extend(nowdata, mark, res.data))
    						window.location.href = '/pinggu/result'
    					}
    				})
    				.catch(function(){
    					that.html("马上估值")
    					_x.showTip("查询繁忙，请稍后重试！")
    				})
				}
			})
			
			//验证 true提交验证 false选择完毕验证
			function validator (type) {
				var modelId = $("#showBrand").data("modelid"),//车系ID
					zone = $("#showArea").data("zone"),//城市ID
					regDate = $("#showRegdate").data("regdate"),//上牌时间
					mile = $("#mile").val();//行驶里程
				if (type) {
					if (_x.isEmpty(modelId)) {
						_x.showTip("请选择车型")
						return false
					}
						
					if (_x.isEmpty(zone)) {
						_x.showTip("请选择城市")
						return false
					}
					
					if (_x.isEmpty(regDate)) {
						_x.showTip("请选择首次上牌日期")
						return false
					}
					
					if (_x.isEmpty(mile)) {
						_x.showTip("请输入行驶里程")
						return false
					}
			
					if (mile < 0 || mile > 100) {
						_x.showTip("请输入大于0且小于100的里程数（最多保留两位小数）")
						return false
					}
					
					return {
						modelId: modelId,
						regDate: regDate,
						mile: mile,
						zone: zone
					}
				} else {
					if (_x.isEmpty(modelId) || _x.isEmpty(zone) || _x.isEmpty(regDate) || _x.isEmpty(mile) || mile < 0 || mile > 100) {
						$("#submit").removeClass("ok")
						return false
					} else {
						$("#submit").addClass("ok")
						return true
					}
				}
			}
			
		})
	</script>
</body>
</html>
